<template>
  <el-container>
    <el-main>
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-form ref="sysJobForm" :model="sysJobForm" :rules="rules" label-width="100px">
        <el-col :span="14">
          <el-form-item label="任务名称">
            <el-col :span="12">
              <el-input v-model="sysJobForm.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="任务描述">
            <el-col :span="12">
              <el-input v-model="sysJobForm.jobDesc">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="执行时间">
            <el-col :span="12">
              <el-input v-model="sysJobForm.cron">
              </el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="任务执行方法">
            <el-col :span="12">
              <el-input v-model="sysJobForm.clazzPath"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="绑定IP地址">
            <el-col :span="12">
              <el-input v-model="sysJobForm.execAddr" placeholder="请输入绑定IP地址"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="状态">
            <el-col :span="12">
              <el-select v-model="sysJobForm.status" placeholder="请选择状态">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="editSysJob('sysJobForm')">修改</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import {find, update} from '@/api/sysJob'
  import {EventBus} from '@/api/eventBus'

  export default {
    name: 'sysJob-edit',
    data() {
      return {
        id:null,
        status: [ // 数据源
          {value: 0, label: '禁用'},
          {value: 1, label: '启用'}
        ],
        execStatus: [],
        sysJobForm: {
          name: '',
          jobDesc: '',
          cron: '',
          status: '',
          execStatus: '',
          clazzPath: ''
        },
        clicked: false,
        rules: {
          name: [
            {required: true, message: '请输入任务描述', trigger: 'blur'},
            {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
          ],
          jobDesc: [
            {required: true, message: '请输入其他描述', trigger: 'blur'},
            {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
          ],
          cron: [
            {required: true, message: '请输入任务表达式', trigger: 'blur'},
            {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
          ],
          status: [
            {required: true, message: '请选择状态', trigger: 'blur'}
          ],
          clazzPath: [
            {required: true, message: '请输入任务执行方法', trigger: 'blur'},
            {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
          ]
        },
      }
    },
    created() {
      console.log(this.$route.query)
      this.sysJobForm.id = this.$route.query.id
      console.log(this.sysJobForm.id, 'id')
      this.loadEditSysJob()
    },
    watch:{ // 只要路由发生变化就重新获取数据
      $route (newVal, val) {
        if (newVal.name=='sysJob-edit' && this.sysJobForm.id != this.$route.query.id) {
          this.sysJobForm.id = this.$route.query.id
          this.loadEditSysJob()
        }
      }
    },
    methods: {
      loadEditSysJob() {
        find(this.$route.query.id).then(res => {
          this.sysJobForm = res.data.sysJob
          if (this.sysJobForm.execStatus === 0) {
            this.execStatus = [{value: 0, label: '未启动'}]
          } else {
            this.execStatus = [{value: 1, label: '运行中'}]
          }
          console.log(this.sysJobForm, 'jobForm')
        }).catch(err => {
          console.log(err)
        })
      },
      editSysJob(sysJobForm) {
        this.$refs[sysJobForm].validate((valid) => {
          if (valid) {
            this.clicked = true
            update(this.sysJobForm).then(res => {
              console.log(res, '666')
              this.clicked = false
              this.$message({
                message: res.content,
                offset: 120,
                center: true
              });
              EventBus.$emit('sysJob-edit', res.data)
              this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                this.$router.push({
                  path: '/sysJob/list'
                })
              })
            }).catch(err => {
              console.log(err)
              this.clicked = false
            })
          } else {
            console.log('err submit')
            return false
          }
        })
        console.log('submit!');
      }
    }
  }
</script>
